Switch control has give rounded edges

[jeevan-sg]

Using below code for Switch component doesn't give rounded edges as in documentation but a rectangular (pic below), can you help? (imported directly NOT from core package and tried all versions 1.0.0 to latest)

import { Switch } from '@twilio-paste/switch <Switch name="settings" value="notifications"> Notifications </Switch>

[SiTaggart]

Hi @jeevan-sg

It's still likely to be a dependency problem. A component depends on a lot of other packages, so if you opt out of Core and grab an individual package you are opting into managing those dependencies.

You can see from the package JSON for this component to work you need all the minimum supported versions of all the other packages it depends on https://github.com/twilio-labs/paste/blob/main/packages/paste-core/components/switch/package.json#L26

"peerDependencies": {
    "@twilio-paste/animation-library": "^1.0.0",
    "@twilio-paste/box": "^9.0.0",
    "@twilio-paste/color-contrast-utils": "^4.0.0",
    "@twilio-paste/customization": "^7.0.0",
    "@twilio-paste/design-tokens": "^9.0.0",
    "@twilio-paste/flex": "^7.0.0",
    "@twilio-paste/help-text": "^12.0.0",
    "@twilio-paste/icons": "^11.0.0",
    "@twilio-paste/inline-control-group": "^12.0.0",
    "@twilio-paste/label": "^12.0.0",
    "@twilio-paste/media-object": "^9.0.0",
    "@twilio-paste/screen-reader-only": "^12.0.0",
    "@twilio-paste/sibling-box": "^8.0.0",
    "@twilio-paste/style-props": "^8.0.0",
    "@twilio-paste/styling-library": "^2.0.0",
    "@twilio-paste/text": "^9.0.0",
    "@twilio-paste/theme": "^10.0.0",
    "@twilio-paste/types": "^5.0.0",
    "@twilio-paste/uid-library": "^1.0.0",
    "@types/react": "^16.8.6 || ^17.0.2 || ^18.0.27",
    "@types/react-dom": "^16.8.6 || ^17.0.2 || ^18.0.10",
    "prop-types": "^15.7.2",
    "react": "^16.8.6 || ^17.0.2 || ^18.0.0",
    "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0"
  },

Depending on your package manager, you should be getting a bunch of mismatched or unmet peer dependency warnings.

Your package manager might not automatically resolve to the correct versions of dependent packages that is needed.

As a concrete example, if you install @twilio-paste/switch at v4.0.0 your app must being running @twilio-paste/design-tokens at v9.0.0. Otherwise, we can't guarantee it'll work as it might be missing things for it to correctly render.

TL;DR is only install Core. Update it often. Don't try to install independent packages unless you can guarantee resolving the needed dependent package versions correctly.

[jeevan-sg]

Thank you, @SiTaggart.