@caseparts-org/caseblocks 0.0.1

package/README.md

@@ -0,0 +1,97 @@
+# Introduction
+
+This is CaseBlocks, the component library for Case Parts.
+
+## Getting started
+
+1. `npm install` to install dependencies.
+2. `npm run build` to build component library.
+
+## Local Development
+
+### Storybook
+
+Use Storybook to view components in an interactive environment when building them.
+
+```
+npm run storybook
+```
+
+### Link to this library locally
+
+This library can be linked from another project, to see local changes to the component libary in a real app.
+
+There are two ways to link locally. In both cases, a symlink is created between the consuming project and _the build artifacts_ of this component library. When making changes in this library, you'll need to run `npm run build` in order for the consuming project to obtain the changes.
+
+1. Install this library via file path.
+
+In the consuming project, install using the relative path to this project, for example:
+
+```
+npm install ../CaseBlocks
+```
+
+In the consumer project, you should see a dependency added in the `package.json` like this:
+
+```
+  "dependencies": {
+    "case-blocks": "file:../CaseBlocks",
+```
+
+1. `npm link`.
+
+This method requires two steps: adding this library to a registry of linkable projects, and then linking to this library from the consuming project.
+
+In this folder, register this library for linking:
+
+```
+npm link
+```
+
+Then in the consuming project, link to this project:
+
+```
+npm link case-blocks
+```
+
+This will not affect the consuming project's `package.json` file.
+
+If you wish to unlink the consuming project from this library, use `npm unlink case-blocks`.
+
+## Using Design Tokens
+
+The `tokens.css` file contains design tokens exported from Figma and is available for use in your projects. To use it, follow the steps below:
+
+### Importing the Tokens
+
+1. **In a CSS File**  
+   Add the following import to your global CSS file:
+
+   ```css
+   @import "case-blocks/styles/tokens.css";
+   ```
+
+2. **In a JavaScript/TypeScript File**  
+   Import the tokens in your entry point (e.g., `App.jsx`):
+
+   ```javascript
+   import "case-blocks/styles/tokens.css";
+   ```
+
+### Accessing the Tokens
+
+Once imported, you can use the CSS variables defined in `tokens.css` throughout your project. For example:
+
+```css
+button {
+  background-color: var(--color-brand-primary-primary-teal-blue);
+  color: var(--color-brand-primary-white);
+}
+```
+
+CSS IntelliSense: Use an extension like 'CSS Variable Autocomplete' for better IntelliSense and easier access to design tokens.
+
+### Notes
+
+- Ensure you run `npm run build` in this library to generate the `tokens.css` file in the `dist/styles` folder before using it in a consumer project.
+- If linking this library locally, rebuild after making changes to ensure the latest tokens are available.

package/dist/Text.module-ruz24ug-.js

@@ -0,0 +1,25 @@
+import './assets/Text.css';const t = {
+  "text-body": "_text-body_dp585_1",
+  "text-display": "_text-display_dp585_7",
+  "text-xxs": "_text-xxs_dp585_15",
+  "text-xs": "_text-xs_dp585_23",
+  "text-sm": "_text-sm_dp585_31",
+  "text-md": "_text-md_dp585_39",
+  "text-lg": "_text-lg_dp585_47",
+  "text-xl": "_text-xl_dp585_55",
+  "text-2xl": "_text-2xl_dp585_63",
+  "text-3xl": "_text-3xl_dp585_71",
+  "text-4xl": "_text-4xl_dp585_79",
+  "text-5xl": "_text-5xl_dp585_87",
+  "text-6xl": "_text-6xl_dp585_95",
+  "text-thin": "_text-thin_dp585_105",
+  "text-extra-light": "_text-extra-light_dp585_111",
+  "text-light": "_text-light_dp585_117",
+  "text-regular": "_text-regular_dp585_123",
+  "text-medium": "_text-medium_dp585_129",
+  "text-semibold": "_text-semibold_dp585_135",
+  "text-bold": "_text-bold_dp585_141"
+};
+export {
+  t
+};

package/dist/assets/Account.css

@@ -0,0 +1 @@
+._loggedIn_14vhg_1{flex-shrink:0;gap:var(--spacing-1-25)}._customer_14vhg_9{gap:var(--spacing-0-125)}

package/dist/assets/Avatar.css

@@ -0,0 +1 @@
+._avatar_18kx8_1{margin:3px;position:relative;background-color:var(--icons-icon-secondary);color:var(--text-text-invert);flex-shrink:0;border-radius:50%;width:26px;height:26px;text-align:center;text-transform:"uppercase"}

package/dist/assets/Button.css

@@ -0,0 +1 @@
+._button_1vql2_1{--inset-shadow-color: var(--surface-surface-primary-btn);--inset-shadow-style: 0 0 0, inset 0 0 0 var(--spacing-0-125) var(--inset-shadow-color);transition-property:background-color,border-width,box-shadow,color;transition-duration:.1s;transition-timing-function:ease-in;padding:var(--spacing-1);border:none;cursor:pointer}._button_1vql2_1:hover{box-shadow:var(--color-neutrals-neutral-2) var(--spacing-0-125) var(--spacing-0-25) var(--spacing-0-5)}._button_1vql2_1:active{box-shadow:none}._button_1vql2_1:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert);transition:none;cursor:default}._button_1vql2_1:disabled:hover{box-shadow:none}._button-primary_1vql2_71{background-color:var(--surface-surface-primary-btn);color:var(--surface-surface-primary)}._button-primary_1vql2_71:active{background-color:var(--color-brand-secondary-dark-teal-blue)}._button-primary_1vql2_71:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-secondary_1vql2_99{background-color:var(--surface-surface-secondary-btn);border:1px solid var(--border-border-secondary-btn);color:var(--text-text-links)}._button-secondary_1vql2_99:active{--inset-shadow-color: var(--surface-surface-secondary);box-shadow:var(--inset-shadow-style)}._button-secondary_1vql2_99:disabled{background-color:var(--surface-surface-disabled-btn-focus);color:var(--surface-surface-disabled-btn);--inset-shadow-color: var(--surface-surface-disabled-btn);box-shadow:var(--inset-shadow-style)}._button-secondary_1vql2_99:disabled:hover{box-shadow:var(--inset-shadow-style)}._button-cta-primary_1vql2_143{background-color:var(--surface-surface-call-to-action-btn);color:var(--surface-surface-primary)}._button-cta-primary_1vql2_143:active{background-color:var(--surface-surface-call-to-action-btn-focus)}._button-cta-primary_1vql2_143:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-tertiary_1vql2_171{background-color:var(--surface-surface-tertiary-btn);color:var(--surface-surface-tertiary-btn-focus)}._button-tertiary_1vql2_171:active{color:var(--surface-surface-disabled-btn);background-color:var(--surface-surface-tertiary-btn-focus);--inset-shadow-color: var(--surface-surface-disabled-btn);box-shadow:var(--inset-shadow-style)}._button-tertiary_1vql2_171:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-destructive_1vql2_207{background-color:var(--surface-surface-error-warning-btn);color:var(--surface-surface-primary)}._button-destructive_1vql2_207:active{color:var(--surface-surface-error-warning-btn);background-color:var(--surface-surface-tertiary-btn-focus);--inset-shadow-color: var(--border-border-error-warning);box-shadow:var(--inset-shadow-style)}._button-destructive_1vql2_207:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-size-xs_1vql2_243{border-radius:var(--border-radius-xs);padding:var(--spacing-spacing-3xs) var(--spacing-spacing-2xs)}._button-size-sm_1vql2_251{border-radius:var(--border-radius-sm);padding:var(--spacing-spacing-3xs) var(--spacing-0-75)}._button-size-md_1vql2_259,._button-size-lg_1vql2_267{border-radius:var(--border-radius-sm);padding:var(--spacing-spacing-2xs) var(--spacing-spacing-default)}._button-size-xl_1vql2_275{border-radius:var(--border-radius-sm);padding:var(--spacing-0-75) var(--spacing-spacing-default)}

package/dist/assets/Chip.css

@@ -0,0 +1 @@
+._chip_mklpn_1{padding:var(--spacing-0-25) var(--spacing-0-5);border-radius:var(--radius-radius-minimal);border:none;width:fit-content;gap:var(--spacing-0-25);color:var(--text-text-invert)}._disabled_mklpn_10{background-color:var(--surface-surface-disabled-btn);cursor:not-allowed;pointer-events:none}._selected_mklpn_16{background-color:var(--surface-surface-primary-chit);cursor:pointer}._unselected_mklpn_21{background-color:var(--surface-surface-disabled-btn);cursor:pointer;color:var(--text-text-quaternary)}._dismissable_mklpn_27{background-color:var(--surface-surface-primary-chit)}._dismissButton_mklpn_31{padding:0;background-color:transparent;border:none;cursor:pointer}._dismissButton_mklpn_31 svg{padding:0;margin:0}._dismissButton_mklpn_31 path{fill:#fff}._pill_mklpn_47{border-radius:var(--border-radius-lg);background-color:var(--surface-surface-primary-chit)}

package/dist/assets/ChipSelector.css

@@ -0,0 +1 @@
+._chipSelector_1k7dl_1{column-gap:var(--spacing-1);row-gap:var(--spacing-0-75);flex-wrap:wrap}

package/dist/assets/Flex.css

@@ -0,0 +1 @@
+._flex_99eez_1{display:flex;flex-direction:var(--flex-direction-large);justify-content:var(--justify-content-large);align-items:var(--align-items-large)}@media (max-width: 1280px){._flex_99eez_1{flex-direction:var(--flex-direction-medium);justify-content:var(--justify-content-medium);align-items:var(--align-items-medium)}}@media (max-width: 767px){._flex_99eez_1{flex-direction:var(--flex-direction-small);justify-content:var(--justify-content-small);align-items:var(--align-items-small)}}

package/dist/assets/Flex2.css

@@ -0,0 +1 @@
+._flexWrapper_1jk8h_1{width:800px}@media (max-width: 1280px){._flexWrapper_1jk8h_1{width:600px}}@media (max-width: 767px){._flexWrapper_1jk8h_1{width:400px}}

package/dist/assets/Grid.css

@@ -0,0 +1 @@
+._grid_wn2h7_3{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--spacing-2);width:100%;max-width:1440px;margin:0 auto}._column_wn2h7_21{min-width:0;width:100%;grid-column:var(--start-large, 1) / span var(--span-large)}@media (max-width: 1280px){._grid_wn2h7_3{max-width:100%}._column_wn2h7_21{grid-column:var(--start-medium, 1) / span var(--span-medium)}}@media (max-width: 767px){._grid_wn2h7_3{grid-template-columns:repeat(4,1fr)}._column_wn2h7_21{grid-column:var(--start-small, 1) / span var(--span-small)}}

package/dist/assets/HideAt.css

@@ -0,0 +1 @@
+@media (min-width: 1281px){._hideAt-lg_curbn_1.hide{display:none}}@media (min-width: 768px) and (max-width: 1280px){._hideAt-md_curbn_13.hide{display:none}}@media (max-width: 767px){._hideAt-sm_curbn_25.hide{display:none}}

package/dist/assets/Icon.css

@@ -0,0 +1 @@
+._icon-sm_flrgw_1{font-size:var(--font-size-md);margin:calc(var(--font-size-md) / 4)}._icon-md_flrgw_6{font-size:var(--font-size-2xl);margin:calc(var(--font-size-2xl) / 4)}._icon-lg_flrgw_11{font-size:var(--font-size-3xl);margin:calc(var(--font-size-3xl) / 4)}

package/dist/assets/Link.css

@@ -0,0 +1 @@
+._link_6pq15_1{color:var(--text-text-links);text-decoration:none}._link_6pq15_1:hover{text-decoration:underline}._link_6pq15_1:focus{text-decoration:underline;font-weight:var(--font-weight-semibold)}._link_6pq15_1._disabled_6pq15_27{color:var(--text-text-disabled);cursor:not-allowed}._link_6pq15_1._disabled_6pq15_27:hover{text-decoration:none}

package/dist/assets/Logo.css

@@ -0,0 +1 @@
+._container_16m6g_1{gap:var(--spacing-1);flex-shrink:0}._wordmark_16m6g_11{margin-bottom:var(--spacing-0-25)}._tagline_16m6g_19{color:var(--color-brand-primary-primary-black)}

package/dist/assets/MainNav.css

@@ -0,0 +1 @@
+._logoAndSearch_3a8de_1{width:100%}._searchContainer_3a8de_7{margin-left:var(--spacing-3-5);margin-right:var(--spacing-1-5);width:100%}@media (max-width: 767px){._searchContainer_3a8de_7{margin-left:0;margin-top:var(--spacing-1)}}._menu_3a8de_25{flex-shrink:0}._chatIcon_3a8de_31{color:var(--color-alerts-success)}@media (min-width: 1281px){._chatIcon_3a8de_31{margin-right:var(--spacing-0-25)}}._siteLink_3a8de_43{margin-right:var(--spacing-2);color:var(--color-brand-primary-primary-black)}._accountId_3a8de_51{margin-bottom:var(--spacing-0-5)}@media (min-width: 768px){._menuIcon_3a8de_57{margin:0 var(--spacing-1-5)}}._separator_3a8de_67{margin:0 var(--spacing-1-5);align-self:stretch}