@ornikar/bumper 3.11.0 → 3.12.0

package/src/system/dataDisplays/Sticker/__snapshots__/Sticker.stories.tsx.snap

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Data Displays/Sticker Default 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "alignSelf": "flex-start",
+        "backgroundColor": "#4DA00A",
+        "borderBottomLeftRadius": 2,
+        "borderBottomRightRadius": 2,
+        "borderTopLeftRadius": 2,
+        "borderTopRightRadius": 2,
+        "maxWidth": "100%",
+        "paddingBottom": 4,
+        "paddingLeft": 4,
+        "paddingRight": 4,
+        "paddingTop": 4,
+      }
+    }
+  >
+    <Text
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        {
+          "color": "#DEF985",
+          "fontFamily": "GTStandardNarrowBold",
+          "fontSize": 12,
+          "letterSpacing": 0,
+          "lineHeight": 14,
+          "textAlign": "left",
+          "textTransform": "uppercase",
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Label
+    </Text>
+  </View>
+</RNCSafeAreaProvider>
+`;

package/src/system/dataDisplays/Sticker/__snapshots_web__/Sticker.features.stories.tsx.snap

@@ -0,0 +1,294 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Data Displays/Sticker/Features Colors 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-g5y9jx r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <div
+            class="is_VStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa94482166 _alignItems-flex-start"
+          >
+            <div
+              class="is_Sticker _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-flex-start _maxWidth-10037 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _backgroundColor-palette--ra391064167"
+              data-disable-theme="true"
+            >
+              <span
+                class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-nowrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1213109893 _lh-f-lineHeigh599485626 _ls-f-letterSpa1883393765 _fw-f-weight-bo3448 _textAlign-left _tt-uppercase _col-palette--ra385477643 _maxWidth-10037 _ox-hidden _oy-hidden _textOverflow-ellipsis"
+              >
+                green
+              </span>
+            </div>
+            <div
+              class="is_Sticker _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-flex-start _maxWidth-10037 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _backgroundColor-palette--ra1511145825"
+              data-disable-theme="true"
+            >
+              <span
+                class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-nowrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1213109893 _lh-f-lineHeigh599485626 _ls-f-letterSpa1883393765 _fw-f-weight-bo3448 _textAlign-left _tt-uppercase _col-palette--ra1504015597 _maxWidth-10037 _ox-hidden _oy-hidden _textOverflow-ellipsis"
+              >
+                greenDark
+              </span>
+            </div>
+            <div
+              class="is_Sticker _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-flex-start _maxWidth-10037 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _backgroundColor-palette--ra1504015597"
+              data-disable-theme="true"
+            >
+              <span
+                class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-nowrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1213109893 _lh-f-lineHeigh599485626 _ls-f-letterSpa1883393765 _fw-f-weight-bo3448 _textAlign-left _tt-uppercase _col-palette--ra1511145825 _maxWidth-10037 _ox-hidden _oy-hidden _textOverflow-ellipsis"
+              >
+                blue
+              </span>
+            </div>
+            <div
+              class="is_Sticker _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-flex-start _maxWidth-10037 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _backgroundColor-palette--ra32584085"
+              data-disable-theme="true"
+            >
+              <span
+                class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-nowrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1213109893 _lh-f-lineHeigh599485626 _ls-f-letterSpa1883393765 _fw-f-weight-bo3448 _textAlign-left _tt-uppercase _col-palette--be1190730196 _maxWidth-10037 _ox-hidden _oy-hidden _textOverflow-ellipsis"
+              >
+                blueDark
+              </span>
+            </div>
+            <div
+              class="is_Sticker _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-flex-start _maxWidth-10037 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _backgroundColor-palette--ra663497604"
+              data-disable-theme="true"
+            >
+              <span
+                class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-nowrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1213109893 _lh-f-lineHeigh599485626 _ls-f-letterSpa1883393765 _fw-f-weight-bo3448 _textAlign-left _tt-uppercase _col-palette--ra1764687175 _maxWidth-10037 _ox-hidden _oy-hidden _textOverflow-ellipsis"
+              >
+                red
+              </span>
+            </div>
+            <div
+              class="is_Sticker _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-flex-start _maxWidth-10037 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _backgroundColor-palette--ra1278361939"
+              data-disable-theme="true"
+            >
+              <span
+                class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-nowrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1213109893 _lh-f-lineHeigh599485626 _ls-f-letterSpa1883393765 _fw-f-weight-bo3448 _textAlign-left _tt-uppercase _col-palette--be1190730197 _maxWidth-10037 _ox-hidden _oy-hidden _textOverflow-ellipsis"
+              >
+                orange
+              </span>
+            </div>
+            <div
+              class="is_Sticker _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-flex-start _maxWidth-10037 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _backgroundColor-palette--ra1129373221"
+              data-disable-theme="true"
+            >
+              <span
+                class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-nowrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1213109893 _lh-f-lineHeigh599485626 _ls-f-letterSpa1883393765 _fw-f-weight-bo3448 _textAlign-left _tt-uppercase _col-palette--ra663497604 _maxWidth-10037 _ox-hidden _oy-hidden _textOverflow-ellipsis"
+              >
+                pink
+              </span>
+            </div>
+            <div
+              class="is_Sticker _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-flex-start _maxWidth-10037 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _backgroundColor-palette--ra1129635643"
+              data-disable-theme="true"
+            >
+              <span
+                class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-nowrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1213109893 _lh-f-lineHeigh599485626 _ls-f-letterSpa1883393765 _fw-f-weight-bo3448 _textAlign-left _tt-uppercase _col-palette--be1190730198 _maxWidth-10037 _ox-hidden _oy-hidden _textOverflow-ellipsis"
+              >
+                gold
+              </span>
+            </div>
+            <div
+              class="is_Sticker _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-flex-start _maxWidth-10037 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _backgroundColor-palette--be1190730198"
+              data-disable-theme="true"
+            >
+              <span
+                class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-nowrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1213109893 _lh-f-lineHeigh599485626 _ls-f-letterSpa1883393765 _fw-f-weight-bo3448 _textAlign-left _tt-uppercase _col-palette--ra663497604 _maxWidth-10037 _ox-hidden _oy-hidden _textOverflow-ellipsis"
+              >
+                cream
+              </span>
+            </div>
+            <div
+              class="is_Sticker _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-flex-start _maxWidth-10037 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _backgroundColor-palette--be1190730196"
+              data-disable-theme="true"
+            >
+              <span
+                class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-nowrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1213109893 _lh-f-lineHeigh599485626 _ls-f-letterSpa1883393765 _fw-f-weight-bo3448 _textAlign-left _tt-uppercase _col-palette--de1049763599 _maxWidth-10037 _ox-hidden _oy-hidden _textOverflow-ellipsis"
+              >
+                linen
+              </span>
+            </div>
+            <div
+              class="is_Sticker _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-flex-start _maxWidth-10037 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _backgroundColor-palette--li196729422"
+              data-disable-theme="true"
+            >
+              <span
+                class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-nowrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1213109893 _lh-f-lineHeigh599485626 _ls-f-letterSpa1883393765 _fw-f-weight-bo3448 _textAlign-left _tt-uppercase _col-palette--li196729426 _maxWidth-10037 _ox-hidden _oy-hidden _textOverflow-ellipsis"
+              >
+                lightning
+              </span>
+            </div>
+            <div
+              class="is_Sticker _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-flex-start _maxWidth-10037 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _backgroundColor-palette--li196729426"
+              data-disable-theme="true"
+            >
+              <span
+                class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-nowrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1213109893 _lh-f-lineHeigh599485626 _ls-f-letterSpa1883393765 _fw-f-weight-bo3448 _textAlign-left _tt-uppercase _col-palette--li196729422 _maxWidth-10037 _ox-hidden _oy-hidden _textOverflow-ellipsis"
+              >
+                lightningDark
+              </span>
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Bumper/Data Displays/Sticker/Features Disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-g5y9jx r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <div
+            class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
+          >
+            <div
+              class="is_Sticker _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-flex-start _maxWidth-10037 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _backgroundColor-palette--li196729422"
+              data-disable-theme="true"
+            >
+              <span
+                class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-nowrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1213109893 _lh-f-lineHeigh599485626 _ls-f-letterSpa1883393765 _fw-f-weight-bo3448 _textAlign-left _tt-uppercase _col-palette--li196729426 _maxWidth-10037 _ox-hidden _oy-hidden _textOverflow-ellipsis"
+              >
+                Enabled
+              </span>
+            </div>
+            <div
+              aria-disabled="true"
+              class="is_Sticker _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-flex-start _maxWidth-10037 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _backgroundColor-bg--disable93739269"
+              data-disable-theme="true"
+            >
+              <span
+                class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-nowrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1213109893 _lh-f-lineHeigh599485626 _ls-f-letterSpa1883393765 _fw-f-weight-bo3448 _textAlign-left _tt-uppercase _col-content--di396036745 _maxWidth-10037 _ox-hidden _oy-hidden _textOverflow-ellipsis"
+              >
+                Disabled
+              </span>
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Bumper/Data Displays/Sticker/Features LongLabel 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-g5y9jx r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <div
+            class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-200px"
+          >
+            <div
+              class="is_Sticker _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-flex-start _maxWidth-10037 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _backgroundColor-palette--be1190730196"
+              data-disable-theme="true"
+            >
+              <span
+                class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-nowrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1213109893 _lh-f-lineHeigh599485626 _ls-f-letterSpa1883393765 _fw-f-weight-bo3448 _textAlign-left _tt-uppercase _col-palette--de1049763599 _maxWidth-10037 _ox-hidden _oy-hidden _textOverflow-ellipsis"
+              >
+                A very long label that should be truncated with an ellipsis
+              </span>
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Bumper/Data Displays/Sticker/Features Sizes 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-g5y9jx r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <div
+            class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
+          >
+            <div
+              class="is_Sticker _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-flex-start _maxWidth-10037 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _backgroundColor-palette--ra391064167 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416"
+              data-disable-theme="true"
+            >
+              <span
+                class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-nowrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1213109893 _lh-f-lineHeigh599485626 _ls-f-letterSpa1883393765 _fw-f-weight-bo3448 _textAlign-left _tt-uppercase _col-palette--ra385477643 _maxWidth-10037 _ox-hidden _oy-hidden _textOverflow-ellipsis"
+              >
+                Small
+              </span>
+            </div>
+            <div
+              class="is_Sticker _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-flex-start _maxWidth-10037 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _backgroundColor-palette--ra391064167 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+              data-disable-theme="true"
+            >
+              <span
+                class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-nowrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont593321891 _lh-f-lineHeigh1366135090 _ls-f-letterSpa199301955 _fw-f-weight-bo3448 _textAlign-left _tt-uppercase _col-palette--ra385477643 _maxWidth-10037 _ox-hidden _oy-hidden _textOverflow-ellipsis"
+              >
+                Medium
+              </span>
+            </div>
+            <div
+              class="is_Sticker _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-flex-start _maxWidth-10037 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _backgroundColor-palette--ra391064167 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410"
+              data-disable-theme="true"
+            >
+              <span
+                class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-nowrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont593321890 _lh-f-lineHeigh1366135091 _ls-f-letterSpa199301954 _fw-f-weight-bo3448 _textAlign-left _tt-uppercase _col-palette--ra385477643 _maxWidth-10037 _ox-hidden _oy-hidden _textOverflow-ellipsis"
+              >
+                Large
+              </span>
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

package/src/system/dataDisplays/Sticker/__snapshots_web__/Sticker.stories.tsx.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Data Displays/Sticker Default 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-g5y9jx r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <div
+            class="is_Sticker _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-flex-start _maxWidth-10037 _paddingTop-t-space-spa94482162 _paddingRight-t-space-spa94482162 _paddingBottom-t-space-spa94482162 _paddingLeft-t-space-spa94482162 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _backgroundColor-palette--ra391064167"
+            data-disable-theme="true"
+          >
+            <span
+              class="font_GTStandardNarrow _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-nowrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-cont1213109893 _lh-f-lineHeigh599485626 _ls-f-letterSpa1883393765 _fw-f-weight-bo3448 _textAlign-left _tt-uppercase _col-palette--ra385477643 _maxWidth-10037 _ox-hidden _oy-hidden _textOverflow-ellipsis"
+            >
+              Label
+            </span>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

package/src/system/dataDisplays/Sticker/components/StickerLabel.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import { InternalTypography } from '../../../content/typography/Typography';
+import type { ContentCapsVariants } from '../../../core/tokens/GTStandardNarrowFont';
+import { context } from '../context';
+import type { StickerSize } from '../types';
+import { STICKER_COLORS } from '../types';
+
+interface InternalStickerLabelProps {
+  children: ReactNode;
+}
+
+const TYPOGRAPHY_VARIANT_BY_SIZE: Record<StickerSize, ContentCapsVariants> = {
+  small: 'content-caps-xs',
+  medium: 'content-caps-m',
+  large: 'content-caps-l',
+};
+
+export function InternalStickerLabel({ children }: InternalStickerLabelProps): ReactNode {
+  const { color, size, disabled } = context.useStyledContext();
+
+  const textColor = STICKER_COLORS[disabled ? 'disabled' : color].text;
+
+  return (
+    <InternalTypography
+      variant={TYPOGRAPHY_VARIANT_BY_SIZE[size]}
+      color={textColor}
+      numberOfLines={1}
+      ellipsizeMode="tail"
+    >
+      {children}
+    </InternalTypography>
+  );
+}

package/src/system/dataDisplays/Sticker/context.ts

@@ -0,0 +1,10 @@
+import { createStyledContext } from '@tamagui/core';
+import type { InternalStickerWithoutMediaProps } from './types';
+
+type StickerContextProps = Required<Pick<InternalStickerWithoutMediaProps, 'color' | 'size' | 'disabled'>>;
+
+export const context = createStyledContext<StickerContextProps>({
+  color: 'green',
+  size: 'small',
+  disabled: false,
+});

package/src/system/dataDisplays/Sticker/types.ts

@@ -0,0 +1,61 @@
+/* eslint-disable @ornikar/kitt/prefer-semantic-tokens --
+ * Sticker intentionally exposes 12 palette-level decorative colors agreed with design.
+ */
+import type { ColorTokens } from '@tamagui/core';
+import type { ReactNode } from 'react';
+import type { TamaguiMediaProps } from '../../types';
+
+export const STICKER_COLORS_LIST = [
+  'green',
+  'greenDark',
+  'blue',
+  'blueDark',
+  'red',
+  'orange',
+  'pink',
+  'gold',
+  'cream',
+  'linen',
+  'lightning',
+  'lightningDark',
+] as const;
+
+export type StickerColor = (typeof STICKER_COLORS_LIST)[number];
+
+export const STICKER_SIZES_LIST = ['small', 'medium', 'large'] as const;
+
+export type StickerSize = (typeof STICKER_SIZES_LIST)[number];
+
+interface StickerColorStyle {
+  background: ColorTokens;
+  text: ColorTokens;
+}
+
+type InternalStickerColor = StickerColor | 'disabled';
+
+export const STICKER_COLORS: Record<InternalStickerColor, StickerColorStyle> = {
+  green: { background: '$palette.rainbow.green-grass', text: '$palette.rainbow.green-apple' },
+  greenDark: { background: '$palette.rainbow.green-pine', text: '$palette.rainbow.blue-sky' },
+  blue: { background: '$palette.rainbow.blue-sky', text: '$palette.rainbow.green-pine' },
+  blueDark: { background: '$palette.rainbow.blue-electric', text: '$palette.beige.3' },
+  red: { background: '$palette.rainbow.brick', text: '$palette.rainbow.sun' },
+  orange: { background: '$palette.rainbow.orange', text: '$palette.beige.2' },
+  pink: { background: '$palette.rainbow.pink', text: '$palette.rainbow.brick' },
+  gold: { background: '$palette.rainbow.gold', text: '$palette.beige.1' },
+  cream: { background: '$palette.beige.1', text: '$palette.rainbow.brick' },
+  linen: { background: '$palette.beige.3', text: '$palette.deepPurple.8' },
+  lightning: { background: '$palette.lightning.5', text: '$palette.lightning.9' },
+  lightningDark: { background: '$palette.lightning.9', text: '$palette.lightning.5' },
+  disabled: { background: '$bg.disabled.hi', text: '$content.disabled.onContrasted' },
+};
+
+export interface InternalStickerWithoutMediaProps {
+  label: ReactNode;
+  color?: StickerColor;
+  size?: StickerSize;
+  disabled?: boolean;
+}
+
+export interface InternalStickerLabelWithoutMediaProps extends InternalStickerWithoutMediaProps {}
+
+export type StickerProps = TamaguiMediaProps<InternalStickerWithoutMediaProps>;

package/src/system/layout/divider/Divider.tsx

@@ -1,5 +1,6 @@
 import { styled } from '@tamagui/core';
 import type { ReactNode } from 'react';
+import { useProps } from '../../core/hooks/useProps';
 import type { ViewProps } from '../../core/primitives/View';
 import { View } from '../../core/primitives/View';
 import type { PropsToTamaguiVariants, TamaguiMediaProps } from '../../types';
@@ -10,10 +11,9 @@ interface InternalDividerWithoutMediaProps {
   isOnContrasted?: boolean;
 }
 
-const InternalDivider = styled(View, {
+const InternalDividerFrame = styled(View, {
   name: 'Divider',
   alignSelf: 'stretch',
-
   variants: {
     type: {
       subtle: {},
@@ -47,6 +47,11 @@ const InternalDivider = styled(View, {
 
 export type DividerProps = TamaguiMediaProps<InternalDividerWithoutMediaProps>;
 
+const InternalDivider = InternalDividerFrame.styleable<DividerProps>((props, ref) => {
+  const flattenProps = useProps(props);
+  return <InternalDividerFrame ref={ref} {...flattenProps} />;
+});
+
 export function Divider(props: DividerProps): ReactNode {
   return <InternalDivider {...props} />;
 }

package/src/system/layout/divider/__snapshots_web__/Divider.features.stories.tsx.snap

@@ -34,6 +34,7 @@ exports[`Bumper/Layout/Divider/Features BetweenListItems 1`] = `
               </div>
               <div
                 class="is_Divider _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-stretch _height-1px _backgroundColor-divider--bo1473130412"
+                data-disable-theme="true"
               />
             </div>
             <div
@@ -50,6 +51,7 @@ exports[`Bumper/Layout/Divider/Features BetweenListItems 1`] = `
               </div>
               <div
                 class="is_Divider _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-stretch _height-1px _backgroundColor-divider--bo1473130412"
+                data-disable-theme="true"
               />
             </div>
             <div
@@ -103,6 +105,7 @@ exports[`Bumper/Layout/Divider/Features OnContrasted 1`] = `
               </span>
               <div
                 class="is_Divider _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-stretch _height-1px _backgroundColor-divider--bo862343508"
+                data-disable-theme="true"
               />
             </div>
             <div
@@ -115,6 +118,7 @@ exports[`Bumper/Layout/Divider/Features OnContrasted 1`] = `
               </span>
               <div
                 class="is_Divider _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-stretch _height-8px _backgroundColor-divider--bo731293974"
+                data-disable-theme="true"
               />
             </div>
           </div>
@@ -155,6 +159,7 @@ exports[`Bumper/Layout/Divider/Features Types 1`] = `
               </span>
               <div
                 class="is_Divider _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-stretch _height-1px _backgroundColor-divider--bo1473130412"
+                data-disable-theme="true"
               />
             </div>
             <div
@@ -167,6 +172,7 @@ exports[`Bumper/Layout/Divider/Features Types 1`] = `
               </span>
               <div
                 class="is_Divider _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-stretch _height-8px _backgroundColor-divider--bo1472678806"
+                data-disable-theme="true"
               />
             </div>
           </div>
@@ -208,6 +214,7 @@ exports[`Bumper/Layout/Divider/Features Vertical 1`] = `
             </div>
             <div
               class="is_Divider _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-stretch _backgroundColor-divider--bo1473130412 _width-1px"
+              data-disable-theme="true"
             />
             <div
               class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _flexGrow-1 _justifyContent-center"

package/src/system/layout/divider/__snapshots_web__/Divider.stories.tsx.snap

@@ -19,6 +19,7 @@ exports[`Bumper/Layout/Divider Default 1`] = `
         >
           <div
             class="is_Divider _dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _alignSelf-stretch _height-1px _backgroundColor-divider--bo1473130412"
+            data-disable-theme="true"
           />
         </span>
       </span>